<template>
  <div class="baseInfoBox">
    <img src="@/assets/zhangmeng.webp" style="width: 200px; height: 200px" />
    <div>
      <h4>掌门信息</h4>
      <ul>
        <li>
          <label>姓名：</label><text>{{ master.name }}</text>
        </li>
        <li><label>境界：</label><text>{{ master.name }}</text></li>
        <li><label>灵根：</label><text>{{ master.name }}</text></li>
        <li><label>启灵兽：</label><text>{{ master.name }}</text></li>
        <li><label>体质：</label><text>{{ master.name }}</text></li>
        <li><label>气感：</label><text>{{ master.name }}</text></li>
        <li><label>力量：</label><text>{{ master.name }}</text></li>
        <li><label>灵活：</label><text>{{ master.name }}</text></li>
        <li><label>悟性：</label><text>{{ master.name }}</text></li>
      </ul>
    </div>
    <div style="width: 100%">
      <h4>门派信息</h4>
      <ul>
        <li><label>门派：</label><text></text></li>
        <li><label>门派等级：</label><text></text></li>
        <li><label>门派声望：</label><text></text></li>
        <li><label>门派福地：</label><text></text></li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useDisciples } from '@/store/useDisciples';
import { Person } from '@/types/person.d';

const disciples = useDisciples().disciples;
let master: Person = disciples.filter(item => item.master)[0];
console.log(master)

watchArray(disciples, () => {
  master = disciples.filter(item => item.master)[0];
})
</script>
<style lang="scss" scoped>
.console-input {
  width: 100%;
}

.baseInfoBox {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.console-input-container {
  display: flex;
  position: absolute;
  bottom: 0;
  width: 100%;
  flex-wrap: nowrap;

  .console-input {
    flex: 1;
  }
}
</style>
